<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="面经详情" left-text="返回" @click-left="onClickLeft" />
    <!-- 面经详情内容 -->
    <div class="detail-content">
      <h2>{{ article.stem }}</h2>
      <div class="detail-info">
        {{ article.createdAt }} | {{ article.views }} 浏览量 |
        {{ article.likeCount }} 点赞数
      </div>
      <div class="detail-author">
        <img class="authorImg" :src="article.avatar" alt="" />
        <span class="author">{{ article.creator }}</span>
      </div>

      <p v-html="article.content"></p>
    </div>

    <div class="article-operation">
      <div
        class="icon-container"
        :class="{ active: article.likeFlag === 1 }"
        @click="likeOrCollect(1)"
      >
        <van-icon name="like-o" size="28" />
      </div>
      <div
        class="icon-container"
        :class="{ active: article.collectFlag === 1 }"
        @click="likeOrCollect(2)"
      >
        <van-icon name="star-o" size="28" />
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleDetail, likeOrCollect } from "../api/article";
export default {
  data() {
    return {
      article: {},
    };
  },
  created() {
    this.loadArticleDetail();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async loadArticleDetail() {
      const res = await getArticleDetail(this.$route.params.id);
      this.article = res.data.data;
    },
    async likeOrCollect(type) {
      await likeOrCollect(this.$route.params.id, type);
      this.loadArticleDetail();
    },
  },
};
</script>

<style lang="less" scoped>
.detail-content {
  padding: 0 16px;
}
.detail-info,
.author {
  color: #999;
  font-size: 14px;
}
.detail-author {
  display: flex;
  margin-top: 20px;
  align-items: center;
  .authorImg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
.article-operation {
  position: fixed;
  right: 16px;
  bottom: 48px;
  display: flex;
}

.icon-container {
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0.53333vw 0.53333vw 2.66667vw #ccc;
  background-color: #fff;
}
.icon-container.active {
  background-color: #f6c93b;
  color: #fff;
}
.icon-container + .icon-container {
  margin-left: 20px;
}
</style>
